<template>
    <div class="policylibrary-detail-pane">
        <div class='detail-top'>
            <div class='detail-goback'>
                <Button icon="ios-arrow-back" class="btn-goback" @click="goback">返回</Button>
            </div>
            <div class="detail-setfollow">
                <div v-if="typeDisplay">
                    <Button type="primary" @click="openconsulting(telphone)">咨询</Button>
                    <Button :type="followtype" @click="setfollow()">{{followtext}}</Button>
                </div>
            </div>
        </div>
        <div class='detail-inner'>
            <div class='title-h5'>{{detail.title}}</div>
            <div class='title-infor'><span>分类：{{detail.type}}</span><span>日期：{{detail.publishDate}}</span></div>
            <div class='detail-content'>
                <table border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left" valign="top" v-html="detail.fullContent"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store/index'
export default{
    name:'PolicyLibraryDetail',
    store,
    data(){
        return {
            follow:'',
            followtext:'跟踪',
            followtype:'default',
            currentId:'',
            typeDisplay:false,
            telphone:"13812345678",
            detail:{
                follow: 0,
                fullContent: "",
                id: 0,
                publishDate: "",
                textContent: "",
                title: "",
                type: "",
                url: "",
                telphone:"13812345678"
            }
        }
    },    
    methods:{
        getDetailData(id){
            let url=this.$url.baseUrl+'/consulting-library/api/policy/detail?id='+id;
            this.$http.get(url).then(response =>{
                let result=response.data
                if (result.meta.success){
                    //console.log(result.data);
                    this.detail=result.data;
                    if(this.detail.follow==1){
                        this.followtext='取消跟踪';
                        this.followtype='default';
                    }else{
                        this.followtext='跟踪';
                        this.followtype='primary';
                    }
                }else {
                    console.log("获取数据失败")
                }
            })
        },
        setfollow(){
            let id=this.$route.params.id;
            let follow=0;
            if(this.detail.follow==1){
                follow=0;
            }else{
                follow=1;
            }
            let url=this.$url.baseUrl+'/consulting-library/api/policy/follow?id='+id+'&follow='+follow;
            this.$http.get(url).then(response =>{
                let result=response.data
                if (result.meta.success){
                    this.$Message.success(result.data, 3);
                    this.getDetailData(this.$route.params.id);//更新列表数据
                }else {
                this.$Notice.warning({
                        title: '抱歉，您的跟踪数量已达上限',
                        desc: '请前往“跟踪设置”进行取消跟踪操作',
                        duration: 3
                });
                console.log("获取数据失败");
                }
            })
        },
        goback(){
            window.history.back();
        },
        openconsulting(telphone){//咨询
            this.$Modal.confirm({
                content: '<p>项目申报请联系：科技日报社技术研发部</p><p>电话：'+telphone+'</p>',
                onOk: () => {
                    //this.$Message.info('Clicked ok');
                },
                onCancel: () => {
                    //this.$Message.info('Clicked cancel');
                }
            });
        }
    },
    mounted() {        
        this.$store.state.hidemenu=false;//隐藏菜单项
        this.getDetailData(this.$route.params.id);//显示当前数据
        if(this.$route.params.type==1){
            this.typeDisplay=true;//显示跟踪按钮
        }else{
            this.typeDisplay=false;//隐藏跟踪按钮
        }
    },
    computed: {
        
    },
}
</script>
<style>
.detail-content p{
    margin:12px 0 0 0;
}
</style>

<style rel="stylesheet/less" lang="less" scoped>
.displayflex(){
  -webkit-display: flex;
  -moz-display: flex;
  display: flex;
}
.flexdiv(){
  -webkit-flex:1;
  -moz-flex:1;
  flex:1;
}
.btn-goback{
    color:#666666;
    background-color: #dcdee2;
}
.policylibrary-detail-pane{
    .detail-top{
        .displayflex(); 
        border-bottom:1px solid #dcdee2;
        padding-bottom:10px;
    }
    .detail-goback{
        text-align:left;
    }
    .detail-setfollow{
        margin-left:auto;
    }
    .title-infor{
        text-align: center;
        color:#999999;
        span{
            padding:0 20px;
        }
    }
    .title-h5{
        text-align:center;
        font-size:16px;
        padding:20px 0 5px 0;
    }
    .detail-content{
        padding:10px 15px;
        line-height: 175%;
    }
    .detail-inner{
        padding:0 15px;
    }
}
</style>

